<template>
<div class="home">
    <div>
        <h3>全局数据</h3>   
        <p>{{ $store.state.a }}</p>
        <button @click="$store.commit('addA',10)">addA</button>
        <button @click="$store.state.a++">addA</button>
        <p>{{ $store.state.b }}</p>
        <button @click="$store.commit('addB',2)">addB</button>
    </div>

    <div>
        <h3>模块内的数据---手动调用版</h3>
        <p>{{ $store.state.demo.x }}</p>
        <p>{{ $store.getters["demo/doubleX"] }}</p>
        <p>{{ $store.getters["demo/tripleX"] }}</p>
        <button @click="$store.commit('demo/addX',10)">addX</button>
        <button @click="$store.dispatch('demo/addXAsync',10)">addXAsync</button>
    </div>
    <div>
        <h3>模块内的数据---映射版</h3>
        <p>{{ x }}</p>
        <p>{{ doubleX }}</p>
        <p>{{ tripleX }}</p>
        <button @click="addX()">addX</button>
        <button @click="addXAsync()">addXAsync</button>
    </div>


</div>
</template>

<script>
// @ is an alias to /src

// import {mapState,mapGetters,mapMutations,mapActions} from "vuex";


// 使用 createNamespacedHelpers 创建基于某个命名空间辅助函数。它返回一个对象，对象里有新的绑定在给定命名空间值上的组件绑定辅助函数：
import { createNamespacedHelpers } from 'vuex'
const { mapState,mapGetters,mapMutations,mapActions } = createNamespacedHelpers('demo'); // 创建基于命名空间demo的辅助函数  =>  优点是:只读取对应模块内的数据  缺点时: 万一要读取其他模块的store数据或根store => 方法会重名 (可以在解构过程中重命名)


export default {
    name: 'HomeView',
    // methods:{
    //     ...mapMutations("demo",["addX"]),
    //     ...mapActions("demo",["addXAsync"]),
    // },
    // computed:{
    //     ...mapState(["a","b"]),  //根store的state
    //     ...mapState("demo",["x"]),  // 根store下的demo中state
    //     ...mapGetters("demo",["doubleX","tripleX"]),  // 根store下的demo中getters
    // },
     methods:{
        ...mapMutations(["addX"]),
        ...mapActions(["addXAsync"]),
    },
    computed:{
        ...mapState(["a","b"]),  //根store的state
        ...mapState(["x"]),  // 根store下的demo中state
        ...mapGetters(["doubleX","tripleX"]),  // 根store下的demo中getters
    },
    mounted(){
        console.log(this);
        console.log(this.$store);
    }
}
</script>
